<template>
    <div class="mini-att" v-if="attachments && attachments.length">
      <!-- 图片缩略图 -->
      <div v-if="imgs.length" class="mini-grid">
        <el-image
          v-for="(src, i) in imgSrcList"
          :key="src + i"
          :src="src"
          class="mini-thumb"
          fit="cover"
          :preview-src-list="imgSrcList"
          :initial-index="i"
          hide-on-click-modal
          preview-teleported
        />
      </div>
  
      <!-- 文件图标 -->
      <div class="mini-icons">
        <!-- PDF -->
        <el-tooltip
          v-for="f in pdfs"
          :key="f.fileUrl || f.fileName"
          :content="`${f.fileName} (单击预览, Ctrl+鼠标左键下载) `"
          placement="top"
        >
          <span
            class="icon-btn pdf"
            @click.stop="handlePdfClick($event, f)"
          >
            <el-icon><Document /></el-icon>
          </span>
        </el-tooltip>
  
        <!-- 其它 -->
        <el-tooltip
          v-for="f in others"
          :key="f.fileUrl || f.fileName"
          :content="`${f.fileName} (单击下载) `"
          placement="top"
        >
          <span class="icon-btn other" @click.stop="downloadOne(f)">
            <el-icon><Document /></el-icon>
          </span>
        </el-tooltip>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from "vue";
  import { Document } from "@element-plus/icons-vue";
  import axios from "axios";
  
  const props = defineProps({
    attachments: { type: Array, default: () => [] },
  });
  
  const BASE = import.meta.env.VITE_APP_BASE_API || "";
  
  const isImg = (a) => {
    const t = (a?.fileType || "").toLowerCase();
    if (t.startsWith("image/")) return true;
    return /\.(png|jpe?g|gif|bmp|webp|svg)$/i.test((a?.fileName || "").toLowerCase());
  };
  const isPdf = (a) => {
    const t = (a?.fileType || "").toLowerCase();
    if (t.includes("application/pdf")) return true;
    return /\.pdf$/i.test((a?.fileName || "").toLowerCase());
  };
  
  const resolveUrl = (u) => {
    if (!u) return "";
    if (/^https?:\/\//i.test(u)) return u;
    return `${BASE.replace(/\/+$/, "")}/${String(u).replace(/^\/+/, "")}`;
  };
  
  const imgs = computed(() => (props.attachments || []).filter(isImg));
  const pdfs = computed(() => (props.attachments || []).filter(isPdf));
  const others = computed(() =>
    (props.attachments || []).filter((a) => !isImg(a) && !isPdf(a))
  );
  
  const imgSrcList = computed(() => imgs.value.map((a) => resolveUrl(a.fileUrl)));
  
  // ✅ PDF 点击：Ctrl+左键 = 下载，否则新标签打开
  const handlePdfClick = (e, f) => {
    if (e.ctrlKey) {
      downloadOne(f);
    } else {
      const url = resolveUrl(f.fileUrl);
      if (url) window.open(url, "_blank", "noopener");
    }
  };
  
  const downloadOne = async (f) => {
    const url = resolveUrl(f.fileUrl);
    if (!url) return;
    try {
      const res = await axios.get(url, { responseType: "blob" });
      const blobUrl = URL.createObjectURL(res.data);
      const a = document.createElement("a");
      a.href = blobUrl;
      a.download = f.fileName || "download";
      document.body.appendChild(a);
      a.click();
      URL.revokeObjectURL(blobUrl);
      a.remove();
    } catch {
      window.open(url, "_blank", "noopener");
    }
  };
  </script>
  
  <style scoped>
  .mini-att { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mini-grid { display: flex; gap: 6px; }
  .mini-thumb { width: 20px; height: 20px; border-radius: 3px; border: 1px solid #e5e7eb; cursor: zoom-in; }
  .mini-icons { display: flex; gap: 6px; }
  .icon-btn { width: 22px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border: 1px solid #e5e7eb; cursor: pointer; }
  .icon-btn:hover { background: #eef2ff; transform: translateY(-1px); }
  .icon-btn :deep(svg){ font-size: 14px; }
  .icon-btn.pdf { background: #fef2f2; border-color:#fecaca; }
  .icon-btn.pdf :deep(svg){ color:#dc2626; }
  .icon-btn.other :deep(svg){ color:#6b7280; }
  </style>
  